﻿<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="chat_app._Default" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    <meta charset ="utf-8" />
    <h2>Your Id = <span id ="your_conn_id"></span></h2>
    <div class ="row" style ="margin-left:300px" >
        <div class ="col-md-8">
    <div class ="form-group" style ="margin-top : 100px;">
        <h4>Enter recipient user id : </h4>
        <input type ="text" id="recipient_id" />
        <br />
        <br />
        <textarea id ="message_text" style ="width : 300px; height : 85px;" onfocus ="TypingFunc(); return false;"></textarea>
        <button id ="send_button" class ="btn btn-primary" onclick ="return false">Send</button>
    </div>
    <div id ="output_result">

    </div>
        <div id ="typing"></div>
        </div>

        <div class ="col-md-4">
            <div id ="all_users" style ="margin-top : 100px;">

            </div>
        </div>
        </div>
    <link href="Content/alertify.default.css" rel="stylesheet" />
    <link href="Content/alertify.bootstrap.css" rel="stylesheet" />
    <link href="Content/alertify.core.css" rel="stylesheet" />
     <audio id="notificationSoundMessage" aria-hidden ="true"  hidden ="hidden" src ="/Content/vk_clc.mp3" ></audio>
    <script src="Scripts/alertify.min.js"></script>
    <script src="Scripts/jquery-1.10.2.min.js"></script>
    <script src="Scripts/jquery.signalR-2.0.3.min.js"></script>
    <script src ="/signalr/hubs"></script>
    <script src="Scripts/mustache.js"></script>
    <script>

        alertify.prompt("Enter nickname : ", function (e, nick_name) {
            if(e)
            {
               
                    ChatClientSignalR(nick_name);
                
             
            }
        });


        function ChatClientSignalR(nick) {
            
            $.connection.hub.qs = 'nick=' + nick;
            counter = $.connection.chat;
            console.log("Connecting to ChatHub ... ");
            console.log("Alex this is magic ))");

            /*counter.client.typing = function (type) {
                if (type == 0) {
                    $("#typing").append("<img id ='loader' src = 'Content/loader.gif'/>");
                }
                else if (type == 1) {
                    $("#loader").hide();
                }
            };*/

            counter.client.getMyConn = function (conn_id) {
                console.log("my nick is ", conn_id);
                $("#your_conn_id").text(conn_id);
            };

            counter.client.connect = function (id,date_string, connect_message,img, user) {
                console.log("recieve new connected user ... ");
               // $("#output_result").prepend("<b>" + date_string + "</b>  " + connect_message);
                $("#all_users").append("<div id = " + id + " style = 'background-color : #66CCFF; cursor : pointer;'class = 'row' onclick = 'SelectUser($(this)); return false;' data-nick = '" + user + "'><div class = 'col-md-4'><img src= 'Content/my_av.jpg' height = '50' width = '50' /></div><div class = 'col-md-4'><span>" + user + "</span></div></div><br/>");
                alertify.log(connect_message);
            };

            counter.client.loadhistory = function (from, message, date) {
                console.log("history message fom id ", from);
                $("#output_result").prepend("<br><br>");
                $("#output_result").prepend("<b>" + date + "</b>  From : <b> " + from + "</b><br> " + message);
            };

            counter.client.newMessage = function (from, message, date) {
                document.getElementById('notificationSoundMessage').play();
                console.log("recieve new message fom id ", from);
                if ($("#output_result").attr("data-nickid") == from) {
                    $("#output_result").prepend("<br><br>");
                    $("#output_result").prepend("<div id = " + from + " style = 'cursor : pointer;background-color : #FFCC66 ' onclick = 'clear($(this)); return false;' ><b>" + date + "</b>  From : " + from + "<br> " + message + "</div>");
                }
                alertify.log("new message from --- > " + from);
            };

            counter.client.callerMessage = function (from, message, date) {

                console.log("recieve new message fom id ", from);
                $("#output_result").prepend("<br><br>");
                $("#output_result").prepend("<div id = " + from + " style = 'cursor : pointer;background-color : #FFCC66 ' onclick = 'clear($(this)); return false;' ><b>" + date + "</b>  From : " + from + "<br> " + message + "</div>");
            };

            $("#send_button").click(function () {
                counter.server.send($("#recipient_id").val(), $("#message_text").val());
                UnTypingFunc();
            });

            counter.client.removeonlineuser = function (id) {
                $("#" + id).hide();
            };

            counter.client.loadhistoryby = function (json_string) {
                var cart = JSON.parse(json_string);
                data = {
                    items: cart
                };
                console.log(cart);
                second_template = "{{#items}}<div id = {{ConnectionId}} 'class = 'row' ><div class = 'col-md-4'><img src= 'Content/my_av.jpg' height = '50' width = '50' /></div><div class = 'col-md-4'><span>{{Message}}</span></div></div>{{/items}}";
                html = Mustache.to_html(second_template, data);
                $("#output_result").html('');
                $("#output_result").append(html);
            };

            window.hubReady = $.connection.hub.start();
        }


        


        function clear(object)
        {
            console.log("clear item ");
            $(object).css('background-color', 'white');
        }

        function TypingFunc()
        {
            //counter.server.type($("#recipient_id").val(),0);
        }

        function UnTypingFunc() {
           // counter.server.type($("#recipient_id").val(),1);
        }

        var prev_selected_id;

        function SelectUser(object)
        {
            $("#" + prev_selected_id).css('background-color', '#66CCFF');
            $(object).css('background-color', '#FFFF99');
            var focused_user = $(object).attr("data-nick");
            prev_selected_id = $(object).attr("id");
            console.log("focused user --- > ", focused_user);
            $("#recipient_id").val(focused_user);
            $("#output_result").attr("data-nickid", focused_user);
            
            counter.server.load(prev_selected_id);
        }

    </script>

</asp:Content>
